<template>
  <div class="title-menu">
    <Item :isActive="isActive" @active="$emit('active')">
      <div class="p-l-r-20 clearfix">
        <div class="fl">
            <slot name="title"></slot>
        </div>
        <div class="fr">
            <slot name="icon"></slot>
        </div>
      </div>
    </Item>
  </div>
</template>

<script>
import Item from "./Item.vue";

export default {
  props: {
    isActive: {
      type: Boolean, //约束该属性的类型是Boolean
      //required:true, //约束该属性必须要传递
      default: false,
    },
  },
  components: {
    Item,
  },
};
</script>

<style>
.fl {
  float: left;
  color: #212121;
  font-weight: 500;
}
.fr {
  float: right;
  font-size: 0.8rem;
  color: #999;
}

.title-menu {
  width: 100%;
  height: 3.5rem;
  line-height: 3.5rem;
}
.p-l-r-20 {
  padding: 0 1.2rem;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
</style>